<template>
    <div class="hand">
        <van-nav-bar :title="$t('transaction.button')" leftArrow @click-left="_return"/>
        <div class="main">
            <div class="know">
                <p class="tip">{{$t('transaction.notice_title')}}</p>
                <div class="desc">
                    <p>{{$t('transaction.notice_one').replace(/ETH/,account)}}</p>
                    <p>{{$t('transaction.notice_two').replace(/ETH/,account).replace(/ETH/,account)}}</p>
                </div>
            </div>
            <div class="know">
                <p class="tip">{{$t('transaction.address')}}</p>
                <div class="desc">
                    <p>{{address}}</p>
                </div>
            </div>
            <div class="know">
                <p class="tip">{{$t('transaction.current_rate')}}<b>{{rate}}</b><span>{{$t('transaction.OEamount')}}</span></p>
                <van-row type="flex" justify="space-between" align="center" class="login">
                    <van-col>
                        <van-field v-model="change.eth" @input="press(change.eth)" placeholder="0.0"><p slot="button">{{account}}</p></van-field>
                    </van-col>
                    <van-col>
                        <span style="color:#CBAF89;padding: 0 5px;">=></span>
                    </van-col>
                    <van-col>
                        <van-field v-model="change.aat" placeholder="0.0" readonly><p slot="button">AAT</p></van-field>
                    </van-col>
                </van-row>
            </div>
            <div class="know">
                <p class="tip">{{$t('transaction.fee')}}</p>
                <div class="choose login">
                    <van-field v-model="price" readonly input-align="left"><p slot="button" @click="showChoose">{{desc}}<van-icon name="arrow-down" /></p></van-field>
                </div>
            </div>
            <button class="btn" @click="submite">{{$t('transaction.button')}}</button>
            <van-popup v-model="pwdShow" position="bottom" :overlay="true">
                <div>
                    <div class="form">
                        <div class="main">
                            <p v-for="item,index in rates" @click="sureRate(item,index)">{{item}}</p>
                        </div>
                    </div>
                </div>
            </van-popup>
            <van-popup v-model="typeShow" position="bottom" :overlay="true">
                <van-nav-bar :title="$t('pay.title')" leftArrow @click-left="typeShow = false"/>
                <div class="pwdMain login">
                    <van-cell-group>
                        <van-field v-model="payPassword" :placeholder="$t('pay.title')" input-align="center" type="password" maxlength="6"/>
                    </van-cell-group>
                    <p @click='forgetPwd'>{{$t('common.forget_password')}}？</p>
                    <div class="btns">
                        <van-button type="info" @click="submitMove">{{$t('pay.button')}}</van-button>
                    </div>
                </div>
            </van-popup>
            <loading v-if="loadingShow"></loading>
        </div>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                address:'',
                rate:'1:300',
                change:{
                    eth:'',
                    aat:''
                },
                price:'',
                rates:[],
                pwdShow:false,
                desc:this.$t('transaction.multiple'),
                typeShow:false,
                payPassword:'',
                loadingShow:false
            }
        },
        methods: {
            _return(){
                this.$emit('_return')
            },
            showChoose(){
                this.pwdShow = true
            },
            getRate(){
                this.$api.post('resonance/sercharge')
                    .then(res =>{
                        Object.keys(res.detail).map(i => this.rates.push(res.detail[i]))
                        this.price = this.rates[0]+ this.account
                        this.rate = `1:${this.nowRate}`
                    })
            },
            sureRate(data,dex){
                this.pwdShow = false
                this.price = data+ this.account
                switch (dex) {
                    case 0:
                        this.desc = this.$t('transaction.multiple')
                        break;
                    case 1:
                        this.desc = '2x'
                        break;
                    case 2:
                        this.desc = '3x'
                        break;
                }
            },
            press(num){
                this.change.aat = num*this.nowRate
            },
            submite(){
                if(this.change.aat < 1){
                    this.$toast(this.$t('info.warn'))
                    return
                }
                this.typeShow = true
            },
            forgetPwd(){
                this.$router.push({name:'safe',params:{mine:this.$route.path}})
            },
            submitMove(){
                if(!this.payPassword){
                    this.$toast(this.$t('pay.title'))
                    return
                }
                let param = {
                    bilv:this.nowRate,
                    num:this.change.eth,
                    sxf: this.price.substr(0,this.price.length-3),
                    paypassword:this.payPassword
                }
                this.loadingShow = true
                this.$api.post('resonance/buytran',param)
                    .then(res =>{
                        this.loadingShow = false
                        this.$toast(res.message)
                        this._return()
                    })
            },
            getAddress(){
                this.$api.get('index/getZrAddr',{coin_name:'aat'})
                    .then(res =>{
                        this.address = res.detail.addr
                    })
            },
        },
        created() {
            this.getRate()
            this.getAddress()
        },
        mounted() {

        },
        props:{
            nowRate:{},
            account:{}
        }
    }
</script>

<style lang="stylus" scoped>
    bac = linear-gradient(90deg,rgba(42,42,42,1) 0%,rgba(46,46,46,1) 100%);
    back = linear-gradient(90deg,rgba(203,175,137,1) 0%,rgba(219,200,170,1) 100%) !important
    font = #CBAF89
    fonts = #898989
    [class*=van-hairline]::after{
        border: none;
    }
    .main
        width 94%
        margin 0 auto
        .know
            margin-top 15px
            .tip
                border-left 3px solid font
                padding-left 4px
                color #D8D8D8
                span
                    color font
                    float right
                    b
                        margin-left 10px
                        font-weight normal
            .desc
                background bac
                border-radius 5px
                font-size 12px
                color #898989
                padding 10px
                margin-top 5px
                p
                    line-height 20px

            .van-col
                margin-top 5px
                .van-icon
                    font-size 20px
                    color font
                    padding 0 10px
                .van-cell
                    background bac !important
                    border-radius 5px
                    .van-field__button p
                        color font
            .choose
                margin-top 5px
                .van-cell
                    background bac !important
                    border-radius 5px
                    .van-field__button p
                        color font
                        display flex
                        display -webkit-flex
                        align-items center
        .btn
            margin-top 15px
            color #000

    .form{
        width: 96%;
        margin: 0 auto;
        .title{
            text-align: center;
            padding: 20px 0;
            color: #FFD894;
        }
        .main {
            width: 80%
            margin 0 auto
            p{
                text-align center
                color #FFD894
                font-size 14px
                padding:20px 0
                border-top 1px solid rgba(255,255,255,0.1)
            }
        }
    }
    .van-popup
        border-radius: 5px;
        background: #160d01
        .tips
            border-radius 5px
            background #FFF
            padding-bottom 30px
            overflow hidden
            p
                text-align center
                margin 25px 0
                color #2E2220
            .input
                width 90%
                margin 0 auto
                p
                    text-align center
                    color #2E2220
                    font-size 12px
                    margin 0
                .btns
                    margin-top 10px
                    display flex
                    display -webkit-flex
                    justify-content space-around
                    button
                        width: 48%
                    .btn
                        height 40px



    .van-popup
        background: #160d01
        .van-nav-bar
            background: #160d01 !important;
        .van-picker
            background: #160d01 !important;
            color: #fff;
    .pwdMain{
        width: 96%;
        margin: 0 auto;
        .van-cell-group{
            border-top: 1px solid #ebedf0;
            border-bottom: 1px solid #ebedf0;
        }
        p{
            text-align: center;
            color: #FDDEB0;
            font-size: 12px;
            margin-top: 10px;
        }
        .van-cell{
            background: #403930 !important;
            color: #E6E6E6;
            .van-cell__value{
                color: #FDDEB0;
            }
        }
        .btns{
            display: flex;
            display: -webkit-flex;
            justify-content: center;
            margin-top: 170px;
            padding-bottom 15px
            .van-button{
                width: 100%;
                color: #000;
                background:linear-gradient(90deg,rgba(192,145,81,1) 0%,rgba(230,200,150,1) 100%);
                border: none;
                /*margin-left: 5%;*/
            }
        }
    }

</style>